<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeBroadcastLayer"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'广播'"/>
        <div class="dy-form">
          <div class="dy-form-item">
            <div class="dy-form-label">广播设备</div>
            <div class="dy-form-inline">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="padding-left: 2vh">
                  <el-checkbox-group v-model="areaList" @change="handleCheckedZoneChange">
                    <el-checkbox v-for="zone in allAreaList" :label="zone" :key="zone.areacode">{{zone.areaname}}</el-checkbox>
                  </el-checkbox-group>
                </div>

            </div>
          </div>
          <div class="dy-form-item">
            <div class="dy-form-label"></div>
            <div class="dy-form-inline">
              <div class="dy-list">
                <div class="dy-search">
                  <input type="text" class="dy-input">
                  <div class="dy-search-icon">
                    <div class="el-icon-search" style="height: 20px;width: 20px;color: white;display: block"></div>
                  </div>
                </div>
                <div class="dy-list-item">
                  <el-checkbox-group v-model="noList">
                    <div class="dy-checkbox" v-for="item in broadCastDevcList">
                      <el-checkbox name="no" :value="item.id">{{item.remark+'['+item.ipaddr+']'}}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
          <div class="dy-form-item">
            <div class="dy-form-label">广播内容</div>
           <div class="dy-form-inline">
              <textarea class="dy-textarea" placeholder="请输入广播内容" v-model="content"></textarea>
            </div>
          </div>
          <div class="dy-form-item">
            <div class="dy-btns">
              <el-button type="primary" style="background: #35CB9C" size="small" @click="send">发送</el-button>
              <el-button type="primary" style="background: #35CB9C" size="small" @click="closeBroadcastLayer">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import ContentTitle from "./contentTitle.vue";
import {onMounted,ref} from "vue";
import {ajaxRequest} from "../../api/code.js";
import {ElMessage} from "element-plus";




const emit = defineEmits(['closeBroadcastLayer']);
const closeBroadcastLayer = function (){
  emit('closeBroadcastLayer')
}

onMounted(() => {
  getBroadCastDevc()
})

const isIndeterminate = ref(false);
const checkAll = ref(false);
const areaList = ref([]);
const allAreaList = ref([
   {areacode:'01',areaname : '南区'}
  ,{areacode:'02',areaname : '北区'}
])
const noList = ref([]);//
const content = ref("");//广播内容


const handleCheckAllChange = function (val){
  areaList.value = val ? allAreaList.value : [];
  isIndeterminate.value = false;
  getBroadCastDevc()
}

const handleCheckedZoneChange = function (value) {
  let checkedCount = value.length;
  checkAll.value = checkedCount === allAreaList.value.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < allAreaList.value.length;
  getBroadCastDevc()
}

const broadCastDevcList = ref([
   {id:1,ipaddr:"192.168.10.1",remark:"广播1"}
  ,{id:2,ipaddr:"192.168.10.2",remark:"广播2"}
  ,{id:3,ipaddr:"192.168.10.3",remark:"广播3"}
]);
async function getBroadCastDevc(){
  const params = {areacode:null}
  if(areaList.value.length === 1){
    params.areacode = areaList.value[0].areacode
  }
  
  const res = await ajaxRequest('post', 'getBroadCastDevc', params)
  if(res.data){
    broadCastDevcList.value = res.data
  }
}

async function send(){
  let ids=''
  noList.value.forEach((item,index) =>{
    if(index > 0){
      ids += ","
    }
    ids += item
  })
  if(ids){
    const params = {
      msg : content.value,
      ids : ids
    }
    const res = await ajaxRequest('post', 'addStaBroadCastRec', params)
    if(res.success){
      ElMessage ({
        type: 'success',
        message: '发送成功!'
      });
    }
  }else{
    ElMessage ({
      type: 'warning',
      message: '请勾选广播!'
    });
  }
  
}

function handleCheck(value){
}
</script>
<style scoped>
.dy-panel{
  position: fixed;
  top: 17vh;
  width: 100%;
  z-index: 1002;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 4.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 1vh;
      flex-wrap: wrap;
    }
  }
}

.dy-form{
  color: white;
  padding: 1vh 2vh;
  .dy-form-item{
    display: flex;
    .dy-form-label{
      font-size: 14px;
      padding-top: 0.8vh;
      width: 120px;
    }
    .dy-form-inline{
      display: flex;
    }
  }
  .dy-textarea{
    padding: 1vh;
    font-size: 12px;
    height: 200px;
    background: transparent;
    border: 2px solid #1D4F59;
    width: 450px;
    color: white;
  }
}

.dy-list{
  border: 2px solid #1D4F59;
  margin-bottom: 1vh;
  width: 450px;
  .dy-search{
    background: rgba(40,126,217,0.24);
    border-radius: 2px 2px 0 0;
    position: relative;
    .dy-search-icon{
      position: absolute;
      right: 1vh;
      top: 1vh;
    }
    .dy-input{
      background: transparent;
      width: 100%;
      border: none;
      color: white;
      padding-left: 1vh;
    }
  }
  .dy-list-item{
    height: 30vh;
    overflow-y: auto;
    .dy-checkbox{
      border-bottom: 1px solid #1D4F59;
      padding-left: 2vh;
    }
  }
}

.dy-btns{
  position: absolute;
  right: 4vh;
  margin-top: 1vh;
}

>>>.el-checkbox{
  color: #FFFFFF;
}

>>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #3dbdc8;
  border-color: var(--el-checkbox-checked-input-border-color);
}
>>> .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #3dbdc8;
}
</style>
